<template>
  <div class="app-container">
    <u-page title="订单管理">
      <!-- 搜索表单 -->
      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="订单号" prop="orderNo">
            <el-input v-model="listQuery.orderNo" placeholder="请输入订单号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="用户手机号" prop="mobile">
            <el-input v-model="listQuery.mobile" placeholder="请输入用户手机号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="订单类型" prop="orderType">
            <el-select v-model="listQuery.orderType" placeholder="请选择订单类型" clearable>
              <el-option label="全部" value="" />
              <el-option label="正常订单" :value="1" />
              <el-option label="退款订单" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="上报状态" prop="ack">
            <el-select v-model="listQuery.ack" placeholder="请选择上报状态" clearable>
              <el-option label="全部" value="" />
              <el-option label="待上报" :value="0" />
              <el-option label="上报成功" :value="1" />
              <el-option label="上报异常" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <!-- 表格 -->
      <u-table
        index="index"
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right" width="200">
            <template slot-scope="{ row }">
              <el-button type="text" @click="hdlViewDetail(row)">详情</el-button>
              <el-button v-if="row.ack === 2" type="text" @click="hdlRetryById(row)">重传</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>
    <u-dialog title="上报数据" :show.sync="jsonDialogVisible" :footer="false" width="45%" class="code">
      <el-input v-model="detailJson" autosize type="textarea" disabled placeholder="{}" />
    </u-dialog>
    <!-- 订单详情弹窗 -->
    <u-dialog title="订单详情" :show.sync="dialogFormVisible" :footer="false">
      <el-form ref="dialogForm" :model="dataForm" label-position="top" label-width="80px">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单号">{{ dataForm.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="用户手机号">{{ dataForm.mobile }}</el-descriptions-item>
          <el-descriptions-item label="群光会员卡号">{{ dataForm.cardNo }}</el-descriptions-item>
          <el-descriptions-item label="订单总金额">{{ dataForm.totalFee / 100 }} 元</el-descriptions-item>
          <el-descriptions-item label="优惠金额">{{ dataForm.discFee / 100 }} 元</el-descriptions-item>
          <el-descriptions-item label="实付金额">{{ dataForm.paidFee / 100 }} 元</el-descriptions-item>
          <el-descriptions-item label="支付时间">{{ dataForm.payTime }}</el-descriptions-item>
          <el-descriptions-item label="订单类型">
            <el-tag v-if="dataForm.orderType === 1" type="success">正常订单</el-tag>
            <el-tag v-else type="info">退款订单</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="原外部订单号">{{ dataForm.refundOrderNo }}</el-descriptions-item>
          <el-descriptions-item label="支付方式">
            <div v-for="(pay, index) in formatPayMode(dataForm.paymode_content)" :key="index">
              {{ pay }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="上报状态">
            <el-tag v-if="dataForm.ack === 0" type="warning">待上报</el-tag>
            <el-tag v-else-if="dataForm.ack === 1" type="success">上报成功</el-tag>
            <el-tag v-else type="danger">上报异常</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="上报失败原因">{{ dataForm.ackMsg }}</el-descriptions-item>
        </el-descriptions>
      </el-form>
    </u-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      api: this.$u.api.PluginsSalesOrder, // 接口地址
      list: [], // 表格数据
      listLoading: false, // 表格加载状态
      listOptions: {
        stripe: true
      },
      listQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 0,
        orderNo: '',
        mobile: '',
        orderType: '',
        ack: ''
      }, // 查询条件
      jsonDialogVisible: false,
      detailJson: {},
      dialogFormVisible: false, // 详情弹窗显示状态
      dataForm: {}, // 详情弹窗数据
      columns: [
        {
          prop: 'orderNo',
          label: '订单号',
        },
        {
          prop: 'cardNo',
          label: '卡号',
        },
        {
          prop: 'totalFee',
          label: '订单总金额',
          width: '120',
          render: (h, params) => {
            return h('el-tag', { props: { type: 'success' }}, `${params.row.totalFee / 100} 元`)
          }
        },
        {
          prop: 'discFee',
          label: '优惠金额',
          width: '120',
          render: (h, params) => {
            return h('el-tag', { props: { type: 'warning' }}, `${params.row.discFee / 100} 元`)
          }
        },
        {
          prop: 'paidFee',
          label: '实付金额',
          width: '120',
          render: (h, params) => {
            return h('el-tag', { props: { type: 'success' }}, `${params.row.paidFee / 100} 元`)
          }
        },
        {
          prop: 'payTime',
          label: '支付时间',
          width: '180'
        },
        {
          prop: 'orderType',
          label: '订单类型',
          width: '120',
          render: (h, params) => {
            return h('el-tag', {
              props: {
                type: params.row.orderType === 1 ? 'success' : 'info'
              }
            }, params.row.orderType === 1 ? '正常订单' : '退款订单')
          }
        },
        {
          prop: 'ack',
          label: '上报状态',
          width: '120',
          render: (h, params) => {
            let type = 'warning'
            let text = '待上报'
            if (params.row.ack === 1) {
              type = 'success'
              text = '上报成功'
            } else if (params.row.ack === 2) {
              type = 'danger'
              text = '上报异常'
            }
            return h('el-tag', { props: { type }}, text)
          }
        },
        {
          prop: 'ack',
          label: '上报内容',
          render: (h, params) => {
            return h('el-button', { props: { type: 'text' }, on: {
              click: () => this.orderDetailToJson(params.row)
            }}, '上报内容')
          }
        }
      ]
    }
  },
  created() {
    this.hdlList() // 初始化加载数据
  },
  methods: {
    // 查看传输内容
    orderDetailToJson(row) {
      const { body } = row
      const content = body ? JSON.parse(body) : {}
      console.log(content)
      this.detailJson = JSON.stringify(content, null, '\t')
      this.jsonDialogVisible = true
    },
    // 查看详情
    hdlViewDetail(row) {
      this.dataForm = { ...row }
      this.dialogFormVisible = true
    },
    // 重传
    hdlRetryById(row) {
      this.$confirm('确定重传该订单的上报数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.api.fetchByRetryId(row.id).then(() => {
          this.$u.msg('重传成功')
          this.hdlList()
        })
      })
    },
    // 格式化支付方式
    formatPayMode(paymode_content) {
      if (!paymode_content) return []
      return paymode_content.split(',').map(item => {
        const [payCode, amount] = item.split(':')
        return `支付代码: ${payCode}, 金额: ${amount / 100} 元`
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.app-container{
  ::v-deep {
    .filter {
      border: 0;
    }

    .code .el-textarea.is-disabled .el-textarea__inner {
      background-color: #060606 !important;
      color: #c6c6c6 !important;
    }

    .ack .el-input{
      width: 120px;
    }
  }
}
</style>
